<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>day08作业</title>
		<style>
			div{width:320px ;height:480px;box-shadow: 5px 5px 5px #000000;background:#99FF99;margin:30px auto; padding-top: 50px;}	
			div p{display:block;width:100%;background:#f70;height: 50px;text-align: center;font: 24px/50px "";}
			div button{display:block;width: 50%; height: 50px; font-size: 15px; color: orange;margin: 8px auto;}					
		</style>
	</head>
	<body>
		<div>
			<p id="time">00:00:00:000</p>
			<button onclick = "startClick();">开始</button><br />
			<button onclick = "pauseClick();">暂停</button><br />
			<button onclick = "stopClick();">重置</button>
		</div>
		
		
	</body>
</html>
<script src="pool.js">
	
</script>
<script>

//4、计时器

time.innerHTML = "00:00:00:000";
	var hours = 0;
	var min = 0;
	var sec = 0;
	var ms = 0;
	var timer = null;
	//1秒等于1000毫秒

		//当数字不足三位的时候补0  应用于时间对象
function add3zero(num){
	if(num/10>=1&&num/100<1){
		var str = "0"+num;
		return str;
	}
	if(num/10<1){
		var str = "00"+num;
		return str;
	}
	if(num/100>=1){
		return num;
	}
}

	
	function startClick() {
		clearInterval(timer);
		timer = setInterval(function() {
			ms += 10;
			if(ms >= 1000) {
				sec++;
				ms = 0;
			}

			if(sec >= 60) {
				min++;
				sec = 0;
			}

			if(min >= 60) {
				hours++;
				min = 0;
			}
			time.innerHTML = addzero(hours) + ":" + addzero(min) + ":" + addzero(sec) + ":" + add3zero(ms);
		}, 10)
	}
	//暂停
	function pauseClick() {
		clearInterval(timer)
	}
	//重置
	function stopClick() {
		clearInterval(timer);
		hours = 0;
		min = 0;
		sec = 0;
		ms = 0;
		time.innerHTML = "00:00:00:000";
	}
	
//5、写一个时钟  详情请看作业视频







//6、数码时钟    详情请看作业自带的图片








</script>